<template>
  <div class="items-center justify-center flex flex-col w-full h-full">
    <p>折线图 2秒后数据更新 父元素relative</p>
    <p class="w-3/4 h-3/4 relative">
      <line-chart v-bind="LineChartAtr"></line-chart>
    </p>
  </div>

</template>
<script setup lang="ts">
import Mock from "@/mock";
import {ref} from "vue";
import LineChart from "@/pages/echart/charts/LineChart.vue";

let lineCategory = Mock.mock(`@getDatesBetween('2023-05-01','2023-05-20','YYYY-MM-DD')`)
let lineValues = lineCategory.map(e => {
  return Mock.mock(`@integer(20, 100)`)
})

const LineChartAtr = ref({
  title: '分公司生产时率(%)',
  seriesName: '生产时率(%)',
  category: Mock.mock(`@getDatesBetween('2023-05-01','2023-05-20','YYYY-MM-DD')`),
  values: lineCategory.map(e => {
    return Mock.mock(`@integer(20, 100)`)
  }),
  themeColor: `rgba(255, 12, 158, 1)`,
  chartOptions: {
    series: [
      {
        smooth: true,
        symbol: 'circle',
        itemStyle: {
          color: 'rgba(12, 88, 543, 1)',
          borderColor: "#fff",
          borderWidth: 1,
          shadowColor: '',
          shadowBlur: 0,
          shadowOffsetY: 0,
          shadowOffsetX: 0,
        },
        markPoint: {
          symbolSize: 0,
          label: {
            show: false,
          }
        },
        symbolSize: 8,
        showSymbol: true,
      },
    ]
  }
})

setTimeout(()=>{
  LineChartAtr.value = {
    title: '2000后数据改变',
    category: Mock.mock(`@getDatesBetween('2023-05-01','2023-05-20','YYYY-MM-DD')`),
    values: lineCategory.map(e => {
      return Mock.mock(`@integer(20, 100)`)
    }),
    themeColor: `rgba(5, 84, 155, 1)`,
  }
}, 2000)
</script>
